<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-focus />
    <input type="text" v-data />
    <input type="text" v-info />
    <div>
      <span>
        <i>213</i>
      </span>
    </div>
    <div>
      {{message}}
    </div>
  </div>
  <script>
    // 1. 第一种方式 注册一个全局自定义指令 `v-focus`
    Vue.directive('info', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        el.addEventListener('change', function () {
          console.log(this.value)
        }, false)
      }
    })
    // 2. 第二种方式 注册一个全局自定义指令 `v-data`
    Vue.directive('data', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        el.addEventListener('change', function () {
          console.log(this.value)
        }, false)
      }
    })
    new Vue(
      {
        el: '#app',
        data: {
          message: 'Hello'
        },
        directives: {
          // 第三种方式  v-focus
          focus: {
            // 指令的定义
            inserted: function (el) {
              el.focus()
            }
          }
        }
      })
  </script>
</body>

</html>